import React, { Component } from 'react'
import {Switch,Redirect,Route} from "react-router-dom"

import ReactLoadable from 'react-loadable'

const Home = ReactLoadable({
    loader: () => import('../components/home/Home.js'),
    loading: () => <div className="loading">loading...</div>
});

const Cart = ReactLoadable({
    loader: () => import('../components/cart/Cart.js'),
    loading: () => <div className="loading">loading...</div>
});

const Mine = ReactLoadable({
    loader: () => import('../components/mine/Mine.js'),
    loading: () => <div className="loading">loading...</div>
});

const Deatil = ReactLoadable({
    loader: () => import('../components/detail/Deatil.js'),
    loading: () => <div className="loading">loading...</div>
});

const Collect = ReactLoadable({
    loader: () => import('../components/collect/Collect.js'),
    loading: () => <div className="loading">loading...</div>
});

export default class Router extends Component {
    render() {
        return (
            <Switch>
                <Route path="/home" component={Home}></Route>
                <Route path="/cart" component={Cart}></Route>
                <Route path="/mine" component={Mine}></Route>
                <Route path="/detail" component={Deatil}></Route>
                <Route path="/collect" component={Collect}></Route>
                <Redirect to="/home" />
            </Switch>
        )
    }
}
